@page "/components/pagination"

<PageOutlet Url="components/pagination"
            Title="Pagination"
            Description="Pagination component of the bit BlazorUI components" />

<DemoPage Name="Pagination"
          Description="Pagination component helps users easily navigate through content, allowing swift browsing across multiple pages or sections, commonly used in lists, tables, and content-rich interfaces."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          SubClasses="componentSubClasses"
          GitHubUrl="Navs/Pagination/BitPagination.razor"
          GitHubDemoUrl="Navs/Pagination/BitPaginationDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitPagination Count="5" />
    </DemoExample>

    <DemoExample Title="Variants" RazorCode="@example2RazorCode" Id="example2">
        <div>The pagination offers three variants: Fill (default), Outline, and Text.</div>
        <br /><br />
        <div>Fill</div>
        <BitPagination Count="5" Variant="BitVariant.Fill" />
        <br /><br />
        <div>Outline</div>
        <BitPagination Count="5" Variant="BitVariant.Outline" />
        <br /><br />
        <div>Text</div>
        <BitPagination Count="5" Variant="BitVariant.Text" />
    </DemoExample>

    <DemoExample Title="Default selected" RazorCode="@example3RazorCode" Id="example3">
        <div>Displays default selected page within the BitPagination component.</div>
        <br />
        <BitPagination Count="5" DefaultSelectedPage="3" />
    </DemoExample>

    <DemoExample Title="BoundaryCount" RazorCode="@example4RazorCode" Id="example4">
        <div>Set a limit to the number of pages shown at the beginning and end of the pagination range.</div>
        <br />
        <BitPagination Count="11" DefaultSelectedPage="6" BoundaryCount="1" />
    </DemoExample>

    <DemoExample Title="MiddleCount" RazorCode="@example5RazorCode" Id="example5">
        <div>
            Allowing users to set the count of pages displayed in the middle portion of the pagination control.
            It also demonstrates how pages are rendered within the defined middle count range.
        </div>
        <br />
        <BitPagination Count="11" MiddleCount="3" BoundaryCount="1" DefaultSelectedPage="6" />
    </DemoExample>

    <DemoExample Title="Navigation buttons" RazorCode="@example6RazorCode" Id="example6">
        <div>There are additional navigation buttons within the Pagination component, providing quick access to the initial and final pages.</div>
        <br />
        <BitPagination Count="24" ShowFirstButton ShowLastButton />
    </DemoExample>

    <DemoExample Title="Icon" RazorCode="@example7RazorCode" Id="example7">
        <div>Displaying custom icons feature within the Pagination navigation buttons.</div>
        <br />
        <BitPagination Count="5" NextIcon="@BitIconName.Next" PreviousIcon="@BitIconName.Previous" />
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example8RazorCode" Id="example8">
        <div>Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.</div>
        <br /><br />
        <div>Primary</div><br />
        <BitPagination Count="5" Color="BitColor.Primary" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Primary" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Primary" Variant="BitVariant.Text" />
        <br /><br /><br /><br />
        <div>Secondary</div><br />
        <BitPagination Count="5" Color="BitColor.Secondary" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Secondary" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Secondary" Variant="BitVariant.Text" />
        <br /><br /><br /><br />
        <div>Tertiary</div><br />
        <BitPagination Count="5" Color="BitColor.Tertiary" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Tertiary" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Tertiary" Variant="BitVariant.Text" />
        <br /><br /><br /><br />
        <div>Info</div><br />
        <BitPagination Count="5" Color="BitColor.Info" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Info" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Info" Variant="BitVariant.Text" />
        <br /><br /><br /><br />
        <div>Success</div><br />
        <BitPagination Count="5" Color="BitColor.Success" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Success" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Success" Variant="BitVariant.Text" />
        <br /><br /><br /><br />
        <div>Warning</div><br />
        <BitPagination Count="5" Color="BitColor.Warning" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Warning" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Warning" Variant="BitVariant.Text" />
        <br /><br /><br /><br />
        <div>SevereWarning</div><br />
        <BitPagination Count="5" Color="BitColor.SevereWarning" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.SevereWarning" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.SevereWarning" Variant="BitVariant.Text" />
        <br /><br /><br /><br />
        <div>Error</div><br />
        <BitPagination Count="5" Color="BitColor.Error" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Error" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Color="BitColor.Error" Variant="BitVariant.Text" />
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example9RazorCode" Id="example9">
        <div>Varying sizes for paginations tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
        <br /><br />
        <div>Small</div><br />
        <BitPagination Count="5" Size="BitSize.Small" Variant="BitVariant.Fill" />
        <br /><br />
        <BitPagination Count="5" Size="BitSize.Small" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Size="BitSize.Small" Variant="BitVariant.Text" />
        <br /><br /><br /><br />
        <div>Medium</div><br />
        <BitPagination Count="5" Size="BitSize.Medium" Variant="BitVariant.Fill" />
        <br /><br />
        <BitPagination Count="5" Size="BitSize.Medium" Variant="BitVariant.Outline" />
        <br /><br />
        <BitPagination Count="5" Size="BitSize.Medium" Variant="BitVariant.Text" />
        <br /><br /><br /><br />
        <div>Large</div><br />
        <BitPagination Count="5" Size="BitSize.Large" Variant="BitVariant.Fill" />
        <br /><br />
        <BitPagination Count="5" Size="BitSize.Large" Variant="BitVariant.Text" />
        <br /><br />
        <BitPagination Count="5" Size="BitSize.Large" Variant="BitVariant.Outline" />
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example10RazorCode" Id="example10">
        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
        <br /><br />
        <div>
            <div>Component's Style & Class:</div>
            <br />
            <BitPagination Count="5"
                           NextIcon="@BitIconName.ChevronDown"
                           PreviousIcon="@BitIconName.ChevronUp"
                           Style="margin-left: 1rem; flex-flow: column;" />
            <br /><br />
            <BitPagination Count="5" Class="custom-class" />
            <br /><br /><br /><br />
            <div><b>Styles</b> & <b>Classes</b>:</div><br />
            <BitPagination Count="5"
                           Styles="@(new() { Root = "margin-left: 1rem; gap: 1rem;",
                                                 SelectedButton = "background-color: tomato; color: #2e2e2e;",
                                                 Button = "border-color: transparent; background-color: #2e2e2e; color: tomato;" })" />
            <br /><br />
            <BitPagination Count="5"
                           Variant="BitVariant.Outline"
                           Classes="@(new() { Root = "custom-root",
                                                  Button = "custom-button",
                                                  SelectedButton = "custom-selected-button"})" />
        </div>
    </DemoExample>

    <DemoExample Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
        <div>Examples of one-way and two-way data binding with BitPagination.</div>
        <br /><br />
        <div style="max-width: 250px;">
            <div>One-way:</div>
            <br />
            <BitPagination Count="5" SelectedPage="oneWaySelectedPage" />
            <br /><br />
            <BitNumberField @bind-Value="oneWaySelectedPage" Min="1" Max="5" />
            <br /><br /><br /><br />
            <div>Two-way:</div>
            <br />
            <BitPagination Count="5" @bind-SelectedPage="twoWaySelectedPage" />
            <br /><br />
            <BitNumberField @bind-Value="twoWaySelectedPage" Min="1" Max="5" />
            <br /><br /><br /><br />
            <div>OnChange:</div>
            <br />
            <BitPagination Count="5" OnChange="p => onChangeSelectedPage = p" />
            <br /><br />
            <div>Changed page: <b>@onChangeSelectedPage</b></div>
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example12RazorCode" Id="example12">
        <div>Use BitPagination in right-to-left (RTL).</div>
        <br /><br />
        <div dir="rtl">
            <BitPagination Dir="BitDir.Rtl" Count="5" Variant="BitVariant.Fill" />
            <br /><br />
            <BitPagination Dir="BitDir.Rtl" Count="5" Variant="BitVariant.Outline" />
            <br /><br />
            <BitPagination Dir="BitDir.Rtl" Count="5" Variant="BitVariant.Text" />
        </div>
    </DemoExample>
</DemoPage>
